<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-05-25 15:49:53
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-29 15:05:41
 -->

<template>
  <div>
    字段组件表
    <ul id="field">
      <li
        draggable="true"
        @click="fieldClick(item, 'click')"
        class="form-edit-widget-label drops"
        v-for="(item, index) in fieldList"
        :key="index"
      >
        <a
          ><i class="icon iconfont" :class="item.icon"></i
          ><span>{{ item.title }}</span></a
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { uuid } from 'vue-uuid'

export default {
  components: {},
  props: {},
  data() {
    return {
      fieldList: [
        {
          title: '单行文本',
          icon: 'icon-input',
          type: 'input',
          props: {
            type: 'text',
            // 输入框类型，可选值为 text、password、textarea、url、email、date
            clearable: false,
            // 是否显示清空按钮
            disabled: false,
            // 设置输入框为禁用状态
            readonly: false,
            // 设置输入框为只读
            rows: 4,
            // 文本域默认行数，仅在 textarea 类型下有效
            autosize: false,
            // 自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
            number: false,
            // 将用户的输入转换为 Number 类型
            autofocus: false,
            // 自动获取焦点
            autocomplete: 'off',
            // 原生的自动完成功能，可选值为 off 和 on
            placeholder: this.title,
            // 占位文本
            size: 'default',
            // 输入框尺寸，可选值为large、small、default或者不设置,
            spellcheck: false,
            // 原生的 spellcheck 属性
            required: false
          },
          validate: []
        },
        {
          title: '数字文本',
          icon: 'icon-number',
          type: 'InputNumber',
          props: {},
          validate: []
        },
        {
          title: '多行文本',
          icon: 'icon-diy-com-textarea',
          type: 'input',
          props: {
            type: 'textarea'
          },
          validate: []
        },
        {
          title: '下拉选择框',
          icon: 'icon-select',
          type: 'select',
          options: [],
          props: {
            collapseTags: true,
            multiple: false
          },
          validate: []
        },
        /* {
          title: '计数器',
          icon: 'icon-number',
          type: 'number',
          props: {},
          validate: []
        },
        {
          title: '单选框组',
          icon: 'icon-radio-active',
          type: 'radio',
          props: {},
          validate: []
        },
        {
          title: '多选框组',
          icon: 'icon-check-box',
          type: 'checkbox',
          props: {},
          validate: []
        },
        {
          title: '时间选择器',
          icon: 'icon-time',
          type: 'TimePicker',
          props: {},
          validate: []
        }, */
        {
          title: '日期选择器',
          icon: 'icon-date',
          type: 'DatePicker',
          required: false,
          props: {
            type: 'date',
            format: 'yyyy-MM-dd'
          },
          validate: []
        },
        /*
        {
          title: '文件',
          icon: 'icon-wenjianshangchuan',
          type: 'file',
          props: {},
          validate: []
        }, */
        {
          title: '文件上传',
          icon: 'icon-wenjianshangchuan',
          type: 'upload',
          props: {
            uploadType: 'image',
            accept: 'image/*',
            listType: 'picture'
          },
          validate: []
        },
        {
          title: '评分',
          icon: 'icon-pingfen1',
          type: 'rate',
          props: {
            max: 5,
            showScore: true
          },
          validate: [
            {
              required: true,
              type: 'number',
              min: 1,
              message: '请大于1颗星',
              trigger: 'change'
            }
          ]
        }
      ]
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(res => {
      let txtObj = document.getElementsByClassName('drops')
      for (let i = 0; i < txtObj.length; i++) {
        txtObj[i].ondragstart = e => {
          this.handle_start(e, i)
        }
        txtObj[i].ondrag = this.handle_drag
        txtObj[i].ondragend = this.handle_end
      }
    })
  },
  methods: {
    // 点击字段传值给中间控制
    fieldClick(item, click) {
      item.id = this.getUUID()
      item.field = item.type + '_' + new Date().getTime()
      if (click) {
        this.$emit('field-click', item)
      }
      return JSON.stringify(item)
    },
    getUUID() {
      return uuid.v1().replace(/-/g, '')
    },
    handle_start(e, index) {
      e.dataTransfer.setData('data', this.fieldClick(this.fieldList[index]))
      console.log('handle_start-拖动开始')
    },
    handle_drag(e) {
      console.log('handle_drag-拖动中')
    },
    handle_end(e) {
      console.log('handle_end-拖动结束')
    }
  }
}
</script>

<style scoped>
ul {
  overflow: hidden;
  user-select: none;
}
.form-edit-widget-label {
  font-size: 12px;
  display: block;
  width: 48%;
  line-height: 26px;
  position: relative;
  float: left;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1%;
  color: #333;
  border: 1px solid #f4f6fc;
}
.form-edit-widget-label:hover {
  color: #409eff;
  border: 1px dashed #409eff;
}
.form-edit-widget-label a {
  display: block;
  /*   cursor: move; */
  cursor: pointer;
  background: #f4f6fc;
  border: 1px solid #f4f6fc;
}
</style>
